
<template>
<div id="app">
    <el-header>
      <div style="width: 1200px;margin: 0 auto;">
        <div style="float: left" class="logo">
          <a href="index"></a>
        </div>
        <div style="float: left">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   text-color="#0aa1ed">
            <el-submenu index="2">
              <template slot="title">地区</template>
              <el-submenu index="2-1">
                <template slot="title">宁波</template>
                <el-menu-item index="2-1-1">海曙区</el-menu-item>
                <el-menu-item index="2-1-2">江东区</el-menu-item>
                <el-menu-item index="2-1-3">江北区</el-menu-item>
                <el-menu-item index="2-1-4">镇海区</el-menu-item>
                <el-menu-item index="2-1-5">北仑区</el-menu-item>
                <el-menu-item index="2-1-6">鄞州区</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item index="3"><a href="detail">买车</a></el-menu-item>
            <el-menu-item index="4"><a href="saleCar">卖车</a></el-menu-item>
            <el-menu-item index="5"><a href="forumIndex">论坛</a></el-menu-item>
            <el-menu-item index="6"><a href="serviceGuarantee">服务保障</a></el-menu-item>
            <el-menu-item index="7"><a href="partner">加盟合伙人</a></el-menu-item>
          </el-menu>
        </div>
        <div id="logoright" style="float: right">
          <span>400-026-9017</span>
          <el-divider direction="vertical"></el-divider>
          <a href="login" style="text-decoration: none;position: relative;
                            top: -5px" id="login">登录</a>
        </div>
      </div>

    </el-header>
    <el-main>
      <div class="main1" style="margin: 230px auto;text-align: left">
        <div style="background-color: white;width: 1200px;height: 36px;"></div>
        <div>
          <span><a style="text-decoration: none;margin: 10px 5px 0 50px;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;" href="">我要买车!</a>
          </span>
          <div class="search-box">
            <el-row class="demo-autocomplete">
              <el-col :span="24">
                <el-autocomplete
                    class="inline-input"
                    v-model="select.keywords"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    :trigger-on-focus="false"
                    @select="searchResult"
                    style="border:0px;"
                ></el-autocomplete>
                <div class="search-btn1">
                  <el-button icon="el-icon-search"
                             style="border: 0px;color:#FFFFFF;background-color: rgba(0,0,0,0);" @click="searchByKeywords()"></el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="fontBtn">
            <div class="font1">
              <a href="">3万以下</a>
              <a href="">3-5万</a>
              <a href="">5-10万</a>
              <a href="">10-15万</a>
              <a href="">15-20万</a>
              <a href="">20-30万</a>
              <a href="">30-60万</a>
              <a href="">60万以上</a>
            </div>
            <div class="font2"><img style="padding-left: 60px;width: 60px;position: relative;top: 3px"
                                    src="https://img1.rrcimg.com/1562747510pc.png" alt="">
              <a href="">降价车</a>
              <a href="">准新车</a>
              <a href="">急售车</a>
              <a href="">紧凑型车</a>
              <a href="">中大型车</a>
              <a href="">豪华车</a>
              <a href="">超值SUV</a>
            </div>
            <div class="font3">
              <a href="searchResult?keywords=大众">大众</a>
              <a href="searchResult?keywords=别克">别克</a>
              <a href="searchResult?keywords=宝马">宝马</a>
              <a href="searchResult?keywords=丰田">丰田</a>
              <a href="searchResult?keywords=福特">福特</a>
              <a href="searchResult?keywords=本田">本田</a>
              <a href="searchResult?keywords=吉利">吉利汽车</a>
            </div>
            <div class="carLogo">
              <img style="margin-left: 65px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/20_1644479532455@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/26_1644479531778@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/22_1644479529842@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/10_1644479533813@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/8_1644479534453@2x.png" alt="">
              <img style="margin-left: 60px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/18_1644479531079@2x.png" alt="">
              <img style="margin-left: 55px"
                   src="https://busi.rrcimg.com/car-model-manage/brand/17_1644479537549@2x.png" alt="">
              <div style="margin: -26px 0 0 625px;">
                <el-row class="">
                  <el-col :span="12">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <div class="font4">
                          <el-dropdown-item><a href="searchResult?keywords=奔驰">奔驰</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=阿尔法罗密欧">阿尔法·罗密欧</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=奥迪">奥迪</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=保时捷">保时捷</a></el-dropdown-item>
                          <el-dropdown-item><a href="searchResult?keywords=野马">野马</a></el-dropdown-item>
                        </div>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 420px;height: 270px;margin: -192px 0 0 750px">
          <div>
            <a style="text-decoration: none;font-size: x-large;
                        color: #ff6d24;text-shadow: 1px 1px 1px #ff6d24;"href="saleCar">我要卖车!</a>
          </div>
          <div style="width: 300px;margin-top: 30px;">
            <el-input
                placeholder="请输入手机号"
                v-model="input"
                clearable>
            </el-input>
          </div>
          <div class="saleCar">
            <a href="/saleCar"><div class="saleCarBtn">
              卖车
            </div></a>
            <div>
              <a href=""><img class="saleCar-img" style="" src="//img2.rrcimg.com/dist/pc/images/index/baomai-img-289fd832.png" alt=""></a>
            </div>
          </div>
        </div>
      </div>
    </el-main>
    <div class="main2">

      <div class="main2content">
        <div class="main2content-service">
          <a href=""><img class="main2content-service-img" src="" alt=""></a>
          <a class="service-item-main2"href="">249项车况检测</a>
          <p class="service-item-main2-subtitle">车况透明 更安心</p>
        </div>
        <div class="main2content-service">
          <a href=""><img class="main2content-service-img" src="" alt=""></a>
          <a class="service-item-main2"href="">90天可退</a>
          <p class="service-item-main2-subtitle">重大事故 极速退车</p>
        </div>
        <div class="main2content-service">
          <a href=""><img class="main2content-service-img" src="" alt=""></a>
          <a class="service-item-main2"href="">1年2万公里质保</a>
          <p class="service-item-main2-subtitle">全程保障 服务省心</p>
        </div>
        <div class="main2content-service">
          <a href=""><img class="main2content-service-img" src="" alt=""></a>
          <a class="service-item-main2"href="">2亿元用户保障金</a>
          <p class="service-item-main2-subtitle">买的放心 开的舒心</p>
        </div>
      </div>
    </div>
    <div style="width: 1200px;margin:0 auto;">
      <div style="height: 457px;margin:270px auto;padding: 0">
        <div class="guide-item">
          <div>
            <div class="guide-item-title">
              <a style="">上班一族首选</a>
              <a style="margin-left: 260px">中产家庭之选</a>
              <a style="margin-left: 260px">品质提升必备</a>
            </div>
            <div class="guide-item-content">
              <div class="guide-item-content-head">
                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/tongqintongqin.png" alt=""></a>
                <div class="guide-overlay"></div>
                <a class="guide-item-content-main">通勤代步</a>
                <a href="" class="guide-item-content-more">查看更多</a>
              </div>
              <div class="guide-item-content-head">
                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/jiameng.png" alt=""></a>
                <div class="guide-overlay"></div>
                <a class="guide-item-content-main">家有萌宝</a>
                <a href="" class="guide-item-content-more">查看更多</a>
              </div>
              <div class="guide-item-content-head">
                <a href=""><img class="guide-item-content-head-img" src="https://img1.rrcimg.com/liaomeiliaomei.png" alt=""></a>
                <div class="guide-overlay"></div>
                <a class="guide-item-content-main">撩妹必备</a>
                <a href="" class="guide-item-content-more">查看更多</a>
              </div>
            </div>
          </div>
          <div class="guide-car-series">
            <div class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=卡罗拉">
                <p class="car-series-name">卡罗拉</p>
                <p class="car-series-tag">节能典范</p>
              </a>
            </div>
            <div style="margin-left: 196px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=速腾">
                <p class="car-series-name">速腾</p>
                <p class="car-series-tag">空间充裕</p>
              </a>
            </div>
            <div style="position:relative;top: 130px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=朗逸">
                <p class="car-series-name">朗逸</p>
                <p class="car-series-tag">外形时尚</p>
              </a>
            </div>
            <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=Polo">
                <p class="car-series-name">Polo</p>
                <p class="car-series-tag">低调个性</p>
              </a>
            </div>
          </div>
          <div style="margin:-260px 0 0 397px" class="guide-car-series">
            <div class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=宝马三系">
                <p class="car-series-name">宝马三系</p>
                <p class="car-series-tag">魅力四射</p>
              </a>
            </div>
            <div style="margin-left: 196px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=宝马五系">
                <p class="car-series-name">宝马五系</p>
                <p class="car-series-tag">运动科技</p>
              </a>
            </div>
            <div style="position:relative;top: 130px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=奔驰C">
                <p class="car-series-name">奔驰C级</p>
                <p class="car-series-tag">内饰顶奢</p>
              </a>
            </div>
            <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=奥迪A4">
                <p class="car-series-name">奥迪A4L</p>
                <p class="car-series-tag">性价比之选</p>
              </a>
            </div>
          </div>
          <div style="margin:-520px 0 0 796px" class="guide-car-series">
            <div class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=奔驰S">
                <p class="car-series-name">奔驰S级</p>
                <p class="car-series-tag">高雅奢华</p>
              </a>
            </div>
            <div style="margin-left: 196px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=普拉多">
                <p class="car-series-name">普拉多</p>
                <p class="car-series-tag">越野跨界生活</p>
              </a>
            </div>
            <div style="position:relative;top: 130px" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=发现">
                <p class="car-series-name">发现</p>
                <p class="car-series-tag">LAND ROVER</p>
              </a>
            </div>
            <div style="position:relative;top: 130px;left: 196px;" class="guide-car-series-item">
              <a class="car-series-item-box" href="searchResult?keywords=Macan">
                <p class="car-series-name">Macan</p>
                <p class="car-series-tag">Porsche</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

  <div>
    <div class="car-list-wrapper">
      <div class="car-list-container">
        <div class="car-list-container-title">
          <span style="float: left;font-size: 22px;color: rgba(0,0,0,.8);text-shadow: 1px 1px 1px rgba(0,0,0,.20);">好车推荐</span>
          <span style="float: left;width: 2px;height: 20px;background: rgba(0,0,0,.07);border-radius: 1px;margin: 5px 0 0 25px;"></span>
          <div>
            <el-menu class="el-menu-demo2" mode="horizontal" @select="handleSelect2">
              <el-menu-item index="特价">特价好车</el-menu-item>
              <el-menu-item index="低调">低调时尚</el-menu-item>
              <el-menu-item index="驾驶">驾驶乐趣</el-menu-item>
              <el-menu-item index="SUV">超值SUV</el-menu-item>
              <el-menu-item index="奢华">奢华享受</el-menu-item>
            </el-menu>
          </div>
          <div>
            <div>
              <el-row style="margin-left: -200px;width: 1200px;height: 690px;">
                <el-col :span="2" v-for="(item, index) in carArr" :key="index" :offset="4" class="">
                  <el-card :body-style="{ padding: '0px' }" class="card-box">
                    <div><img :src="item.url" class="card-box-image"></div>
                    <div style="padding: 14px;">
                      <span>{{item.car_logo}}</span>
                      <div class="clearfix">
                        <div><p class="card-box-time">{{item.model}}</p></div>
                        <div style="margin-top: 45px;">
                          <p><span style="font-size: 20px;color: coral;">{{item.price}}万元
                                                    </span>
                            <span style="font-size: 14px;color: rgba(0,0,0,.36);">{{item.course}}万公里</span>
                            <span><el-button type="text" class="card-box-button">咨询</el-button></span>
                          </p>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
              <div style="height: 46px;width: 170px;margin-left: 545px">
                <el-button type="info" size="medium" plain><a href="searchResult"style="
                                        text-decoration: none;color: rgba(0,0,0,.36)">查看更多!</a></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div style="width: 1200px;margin: 0 auto">
    <p style="margin-top: 30px">
                <span style="font-size: 24px;text-shadow: 1px 1px 1px rgba(0,0,0,.20);">
                交易流程
                 </span>
      <span style="float: left;width: 2px;height: 22px;background: rgba(0,0,0,.07);
                border-radius: 1px;margin-top: 5px;position:relative;left: 120px">
                </span>
      <span style="float: right;margin-top: 5px;font-size: 16px;
                    color: rgba(0,0,0,.6);">免费咨询电话:400-026-9017
                </span>
    </p>
  </div>
  <div class="car-flow-box">
    <input type="radio" name='select' id='slide_1' checked hidden>
    <input type="radio" name='select' id='slide_2' hidden>

    <div class="slider">
      <label for="slide_1" class='slide slider-1'></label>
      <label for="slide_2" class='slide slider-2'></label>
    </div>

    <div class="flow flow-1">
      <div class="img">
        <img src="/images/indexImage/buy.png" alt="">
      </div>

    </div>
    <div class="flow flow-2">
      <div class="img">
        <img src="/images/indexImage/sale.png" alt="">
      </div>
    </div>
  </div>

  <div class="end-show">
    <div class="end-show-box">
      <div class="end-show-content">
        <img src="/images/indexImage/RS7.jpg"width="100%">
        <span>RS7</span>
      </div>
      <div class="end-show-content">
        <img src="/images/indexImage/AMG.jpg">
        <span>AMG</span>
      </div>
      <div class="end-show-content">
        <img src="/images/indexImage/911.jpg">
        <span>911</span>
      </div>
      <div class="end-show-content">
        <img src="/images/indexImage/M8.jpg">
        <span>M8</span>
      </div>
      <div class="end-show-content">
        <img src="/images/indexImage/R8.jpg">
        <span>R8</span>
      </div>
      <div class="end-show-content">
        <img src="/images/indexImage/Quattroporte.jpg">
        <span>Quattroporte</span>
      </div>
    </div>
  </div>


  <div id="r-footer">
    <div class="r-footer-container">
      <div class="baozhang"></div>
      <div class="link-clearfix">
        <div class="link-left">
          <div class="link-left_item">
            <div class="link-left_item-title">关于我们</div>
            <ul>
              <li><a href="">公司介绍</a></li>
              <li><a href="">联系我们</a></li>
              <li><a href="">加入我们</a></li>
              <li><a href="">加盟合伙人</a></li>
            </ul>
            <ul>
              <li><a href="">用户服务协议</a></li>
              <li><a href="">隐私政策</a></li>
              <li><a href="">法律声明</a></li>
              <li><a href="">协议及声明</a></li>
            </ul>
          </div>
          <div class="link-left_item" style="width: 140px">
            <div class="link-left_item-title">交易流程</div>
            <ul>
              <li><a href="">买车流程</a></li>
              <li><a href="">卖车流程</a></li>
              <li><a href="">异地购车</a></li>
            </ul>
          </div>
          <div class="link-left_item">
            <div class="link-left_item-title">二手车精选</div>
            <ul>
              <li><a href="">车型库</a></li>
              <li><a href="">二手车资讯</a></li>
              <li><a href="">二手车问答</a></li>
            </ul>
            <ul>
              <li><a href="">二手车估价</a></li>
              <li><a href="">二手车迁入标准</a></li>
            </ul>
          </div>
        </div>
        <div class="link-right">
          <div class="link-right_tel">
            <div class="number">400-039-6051</div>
            <div class="time">周一至周日 9:00-18:00</div>
            <div class="text">免费咨询(咨询、建议、投诉)</div>
          </div>
          <div class="link-right_app">
            <div class="r-item">
              <span>关注微信</span>
              <div class="lazyload">
                <img src="/images/salecar_img/wechat.jpg" alt="" style="width: 100%;">
              </div>
            </div>
            <div class="r-item">
              <span>下载APP</span>
              <div class="lazyload">
                <img src="/images/salecar_img/down-app.png" alt="" style="width: 100%;">
              </div>
            </div>
          </div>
          <div class="link-right_sns">
          </div>
        </div>
      </div>
    </div>
    <div id="r-footer-copyright">
      <div class="r-footer-copyright-container">
        <img src="/images/salecar_img/wangbei.png" alt="" >
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "searchResult",
  data: function () {
    return {
      activeIndex: '1',
      dq: "海曙区",
      restaurants: [],
      select: {
        keywords: '',
      },
      input: '',
      carArr: [{index:"低调",name:"低调时尚"}]
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect2(key) {
     let url = "http://localhost:5081/cars/showKey?key="+key;
      console.log(url);
      this.axios.get(url).then((response)=>{
        console.log(response.data);
        let jsonResult = response.data;
        this.carArr = jsonResult.data;
        this.carArr = this.carArr.slice(0,8);
      })
    },
    querySearch(queryString, cb) {
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    searchByKeywords() {
      console.log(1);
      let url = '/searchResult?keywords='+this.select.keywords;
      location.href=url;
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "奔驰C级"},
        {"value": "奔驰E级"},
        {"value": "奔驰GLC"},
        {"value": "奔驰GLE"},
        {"value": "奔驰S级"},
        {"value": "迈巴赫"},
        {"value": "奥迪A4L"},
        {"value": "奥迪A6L"},
        {"value": "奥迪Q5L"},
        {"value": "奥迪A8"},
        {"value": "奥迪R8"},
        {"value": "宝马3系"},
        {"value": "宝马5系"},
        {"value": "路虎"},
        {"value": "野马"},
      ];
    },
    searchResult(){
      this.restaurants = this.loadAll();
    }
  },
  mounted() {
    this.restaurants = this.loadAll();
  },
  created: function () {
    if (location.search.indexOf("dq=") != -1) {
      let dqs = location.search.split("dq=");
      let dq = dqs[1];
      this.dq = dq;
    }
    this.axios.get("http://localhost:5081/cars/show").then((response)=>{
      let data = [];
      for (let i = 0; i < 8; i++) {
        data.push(response.data[i]);
      }
      this.carArr = data;
    })
  },

}

</script>

<style>
* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url("/public/images/indexImage/background.jpg");
  background-repeat: no-repeat;
  width: 100%;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 0;
  color: #ff6d24;
}
.el-menu a {
  font-size: 18px;
  text-decoration: none;
}

#logoright * {
  color: white;
  float: right;
  margin-top: 20px;
}

#login {
  margin-top: 22px;
}

.logo {
  float: left;
  width: 100px;
  display: block;
  height: 58px;
  background-image: url("/public/images/indexImage/logo.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position-y: 0px;
}

.logo:hover {
  overflow: hidden;
  background-position-y: -60px;
}

.dl:hover {
  background-color: #ff6d24;
  font-size: 30px;
  width: 80px;
  height: 45px;
  border-radius: 4px;
  margin-top: 10px;
  margin-left: 10px;
  text-align: center;
  box-shadow: 2px 2px 3px #ff6d24;
}

.main1 {
  width: 1200px;
  height: 269px;
  background-color: white;
  border-radius: 10px;
  border: 0 solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.search-box {
  display: inline-block;
  background-color: #ff6d24;
  color: white !important;
  position: absolute;
  height: 37px;
  width: 200px;
  border-radius: 10px;
  padding: 5px;
}

.search-btn1 {
  position: relative;
  margin-left: 145px;
  bottom: 40px;
}

.el-autocomplete input {
  background-color: rgba(0, 0, 0, 0);
  border: 0px;
  color: white;
}

.el-autocomplete input::placeholder {
  color: white;
}
.fontBtn a:hover{
  color: #ff6d24;
}
.font1 {
  height: 36px;
  padding: 50px 0 0 50px;
}

.font1 a {
  font-size: 16px;
  text-decoration: none;
  color: black;
  padding: 10px;
}

.font2 {
  margin-top: 10px;
  width: 700px;
  height: 40px;
}

.font2 a {
  margin-left: 10px;
  font-size: 15px;
  text-decoration: none;
  color: black;
  padding: 8px;
}

.font3 {
  padding-left: 60px;
}

.font3 a {
  margin-left: 10px;
  font-size: 14px;
  text-decoration: none;
  color: black;
  padding: 18px;
}

.fontBtn img {
  width: 18px;
}
.carLogo {
  margin-top: -17px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #b2bec3;
  margin-left: -25px;
  position: relative;
  top: 2px;
}
.el-dropdown-link:hover{
  color: #ff6d24;
}
.font4 a{
  text-decoration: none;
  color: black;
  font-size: 14px;
}
.el-input__inner:focus{
  border-color: #ff6d24;
}
.saleCarBtn{
  width: 115px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 40px;
  background: #FF6B23;
  border-radius: 1px 4px 4px 1px;
  color: #fff;
  font-size: 18px;
  border: none;
  margin: -130px 0 0 301px;
  font-weight: 400;
  cursor: pointer;
}
.saleCarBtn:hover{
  background-color: #d35400;
}
.saleCar-img{
  width: 400px;
  height: 61px;
  position:relative;
  top: 30px;
}
.saleCar-img:hover{
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0 5px 15px #bdc3c7;
}
.main2{
  width: 1200px;
  height: 25px;
  margin: 0 auto;
  margin-top: -200px;
}
.main2content-service{
  float: left;
  width: 299px;
  height: 120px;
  text-align: center
}
.main2content{
  box-sizing: border-box;
  width: 100%;
  height: 164px;
  margin-top: 60px;
  padding: 30px 1px 14px;
  background-image: url(//img2.rrcimg.com/dist/pc/images/index/service-bg-654855d3.png);
  background-size: cover;
}
.service-item-main2{
  font-size: 16px;
  line-height: 16px;
  margin-top: 10px;
  color: #8c5313;
  cursor: pointer;
  text-decoration: none;
}
.service-item-main2-subtitle{
  font-size: 14px;
  line-height: 14px;
  margin-top: 10px;
  color: rgba(140,83,19,.6);
}
.main2content-service-img{
  width: 52px;
  margin: 3px auto 0;
  display: block;
  cursor: pointer;
}
.guide-item{
  width: 397px;
  height: 457px;
}
.guide-item-title{
  width: 1200px;
  font-size: 22px;
  height: 29px;
  color: rgba(0,0,0,.8);
  text-shadow: 0 0 1px rgba(140,83,19,.6),0 0 2px rgba(140,83,19,.6),0 0 1px rgba(140,83,19,.6),0 0 1px rgba(140,83,19,.6);
}
.guide-item-content{
  margin-top: 28px;
  width: 1200px;
  height: 400px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,.05);
  color: #5b5d71;
  display: flex;
}
.guide-item-content-head{
  box-sizing: border-box;
  height: 139px;
  overflow: hidden;
  position: relative;
  /* 自动放大占满剩余空间 */
  flex: 1;
  transition: 1s;
}
.guide-item-content img{
  width: 390px;
  height: 100%;
  /* 保持原有尺寸比例，裁切长边 */
  background-size: cover;
  transition: 1s;
}
.guide-overlay{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom,#F8F2E8,transparent);
  background-size: 100% 200%;
  background-position: 0 0;
  opacity: 1;
  transition: 0.5s;
}
.guide-item-content-head:hover .guide-item-content-head-img{
  /* 图片变大 */
  transform: scale(1.1);
}
.guide-item-content-head:hover .guide-overlay{
  /* 降低遮罩层的不透明度 */
  opacity: 0.4;
}
.guide-item-content-main{
  position: relative;
  top: -92px;
  margin-left: 39px;
  font-size: 28px;
  line-height: 28px;
}
.guide-item-content-more{
  position: relative;
  top: -60px;
  left: -90px;
  width: 112px;
  height: 23px;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
  color: rgba(0,0,0,.36);
  text-decoration: none;
}
.guide-item-content-more:hover{
  color: rgba(0,0,0,.6);
  cursor: pointer;
}
.guide-car-series{
  box-sizing: border-box;
  width: 393px;
  background-color: #fff;
  position: relative;
}
.guide-car-series-item{
  border: 1px solid #F8F2E8;
  margin-top: -260px;
  float: left;
  width: 196px;
  height: 130px;
  text-align: center;
}
.car-series-item-box{
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;
  padding-top: 42px;
  text-decoration: none;
}
.car-series-name{
  font-size: 16px;
  line-height: 21px;
  color: rgba(0,0,0,.6);
  transition: .2s;
  text-decoration: none;
}
.car-series-name:hover{
  color: #ff6d24;
}
.car-series-tag{
  font-size: 16px;
  line-height: 21px;
  margin-top: 5px;
  transition: .2s;
  color: #414e74;
}
.guide-car-series-item:hover .car-series-item-box{
  transform: scale(1.1);
}

.car-list-wrapper{
  width: 100%;
  height: 790px;
  background: #F8F8F8;
  margin-top: -190px;
  padding-top: 41px;
}

.car-list-container{
  width: 1200px;
  margin: 0 auto;
}
.car-list-container:before{
  line-height: 0;
  display: table;
  content: '';
}
.car-list-container-title{
  width: 1200px;
  height: 39px;
}

.list-container-title-font{
  font-size: 30px;
  text-decoration: none;
  color: #222;
  position: relative;
  top: 4px;
}

.el-menu-demo2{
  margin:-15px 0 0 40px;
  background-color: #F8F8F8;
}
.el-menu--horizontal>.el-menu-item.is-active{
  color: rgba(0,0,0,.6);
}
.el-menu--horizontal>.el-menu-item.is-active:hover{
  color: coral;
}
.el-menu--horizontal>.el-menu-item.is-active:focus{
  color: coral;
}
.el-menu.el-menu--horizontal{
  border-style: none;
}

.card-box{
  width: 290px;
  height: 331px;
  margin-bottom: 10px;
}
.card-box:hover{
  box-shadow: 0 8px 15px 0 rgba(0,0,0,.15);
  cursor: pointer;
}

.card-box-time {
  font-size: 13px;
  color: #999;

}

.card-box-button {
  float: right;
}

.card-box-image {
  width: 100%;
  height: 192px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.car-flow-box{
  width: 1200px;
  height: 350px;
  position: relative;
  margin-left: 300px;
  background-color: white;
}
.flow {
  display: flex;
  align-items: center;
  /* width: 300px; */
  height: 100%;
  /* height: 300px; */
  padding-left: 30px;
  position: absolute;
  overflow: hidden;
}

.flow .img {
  width: 1200px;
  height: 202px;
  border-radius: 20px;
  overflow: hidden;
  /* 防止被挤压 */
  flex-shrink: 0;
  margin: 0 auto;
}
.flow .img img {
  width: 100%;
  height: 100%;
  /* 图片默认隐藏 */
  opacity: 0;
  /* 过渡效果 */
  transition: 0.6s;
}
/* 通过单选框checked来显示指定图片 */
#slide_1:checked ~ .flow-1 img,
#slide_2:checked ~ .flow-2 img{
  opacity: 1;
  transition-delay: 0.2s;
}

.slider {
  position: absolute;
  bottom: 25px;
  left: 55%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider .slide {
  width: 50px;
  height: 10px;
  background-color: #dfdfdf;
  display: inline-flex;
  margin: 0 3px;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.slider .slide::before {
  content: "";
  width: 0%;
  height: 100%;
  background-color: coral;
  border-radius: 5px;
  position: absolute;
  left: 0;
  top: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s;
}
#slide_1:checked ~ .slider .slider-1::before,
#slide_2:checked ~ .slider .slider-2::before{
  width: 100%;
  transform: scaleX(1);
}

* {
  /* 初始化 取消页面的内外边距 */
  padding: 0;
  margin: 0;
}

.end-show {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 700px;
  background-color: #F8F2E8;
}

.end-show-box{
  width: 70%;
  height: 500px;
  display: flex;
}
.end-show-content{
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 20px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
  border-radius: 20px;
  border: 10px solid #fff;
  background-color: #fff;
}
.end-show-content>img{
  width: 200%;
  height: 85%;
  object-fit: cover;
  transition: .5s;
}
.end-show-content>span{
  font: 200 45px '优设标题黑';
  text-align: center;
  height: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 2px 3px 4px rgba(0, 0, 0, .5);
}
.end-show-content:hover{
  flex-basis: 40%;
}
.end-show-content:hover>img{
  width: 100%;
  height: 100%;
}

#r-footer {
  background-color: #4c4c4c;
  width: 100%;
  height: 400px;
}

.r-footer-container {
  width: 1200px;
  height: 320px;
  margin: 0 auto;

}

.baozhang {
  height: 74px;
  font-size: 16px;
  color: #fff;
  background-image: url("/public/images/salecar_img/b1.png");
}

.link-clearfix {
  width: 1200px;
  height: 160px;
  margin: 40px auto;
}

.link-left {
  width: 758px;
  height: 123px;
  float: left;
}
.link-left a{
  text-decoration: none;
}
.link-left a:hover{
  color: #ff6d24;
}

.link-left_item {
  width: 300px;
  height: 123px;
  margin-bottom: 6px;
  display: inline-block;
  vertical-align: top;
}

.link-left_item-title {
  width: 234px;
  height: 21px;
  font-size: 16px;
  color: #fff;
  margin: 0 0 10px 0;
}

ul {
  display: inline-block;
  padding: 0;
  margin: 0 40px 0 0;
  vertical-align: top;
}

li {
  line-height: 24px;
  font-size: 14px;
  list-style: none;
}

li > a {
  color: #adadad;
}

.link-right{
  float: right;
  width: 440px;
  position: relative;
}
.link-right_tel{
  width: 160px;
  float: left;
  color: #fff;
}
.number{
  font-size: 22px;
  line-height: 34px;
  margin-top: 20px;
}
.time{
  font-size: 14px;
}
.text{
  font-size: 12px;
  line-height: 24px;
  margin: 5px 0 0;
  color: #979797;
}
.link-right_app{
  float: left;
  width: 272px;
  height: 136px;
}
.r-item{
  width: 88px;
  float: left;
  text-align: center;
  margin-left: 32px;
}
.r-item>span{
  color: #bbbbbb;
  padding-bottom: 8px;
  margin: 0 auto;
}
.lazyload{
  margin: 8px 0 24px 0;
  width: 88px;
  height: 88px;
}
.link-right_sns{
  display: block;
  float: left;
  width: 424px;
  height: 24px;
  background-image: url("/public/images/salecar_img/sns1.png");
}
#r-footer-copyright{
  width: 100%;
  height: 80px;
  font-size: 12px;
  color: #fff;
  background-color: #2f2f2f;

}
.r-footer-copyright-container{
  width: 1200px;
  margin: 0 auto;
  text-align: center;
}
</style>